<script>
import Vue from 'vue'
import VCharts from 'v-charts'

Vue.use(VCharts)

function checkTime(i) {
  if (i < 10) {
    i = '0' + i
  }

  return i
}

export default {
  data() {
    return {
      addArr: [],
      befor_Items: '',
      after_Items: '',
      befor_IUser: '',
      after_IUser: '',
      progress_bar: 0,
      timer_IUser: '',
      timer_Items: '',
      timer_TShopAn: '',
      befor_TShopAn: '',
      after_TShopAn: '',
      fullscreenLoading: false

    }
  },
  created() {
    this.time_first()
  },
  methods: {
    Timer_IUser() {
      var data = new URLSearchParams()
      data.append('fwfw', 'fwfw')
      this.$axios.post(`excel/TUserInsertTimer`, data)
        .then((res) => {
          this.progress_bar = res.data
          if (res.data === 100) {
            clearInterval(this.timer_IUser)
          }
          if (res.data.code === 401) {
            this.progress_bar = 0
            clearInterval(this.timer_IUser)
            this.$message({
              type: 'error',
              message: '权限不足'
            })
          }
        }).catch((e) => {
          this.progress_bar = 0
          clearInterval(this.timer_IUser)
        })
    },
    Timer_Items() {
      var data = new URLSearchParams()
      data.append('fwfw', 'fwfw')
      this.$axios.post(`excel/SaleItemsTimer`, data)
        .then((res) => {
          this.progress_bar = res.data
          if (res.data === 100) {
            clearInterval(this.timer_Items)
          }
          if (res.data.code === 401) {
            this.progress_bar = 0
            clearInterval(this.timer_Items)
            this.$message({
              type: 'error',
              message: '权限不足'
            })
          }
        }).catch((e) => {
          this.progress_bar = 0
          clearInterval(this.timer_Items)
        })
    },
    Timer_TShopAn() {
      var data = new URLSearchParams()
      data.append('fwfw', 'fwfw')
      this.$axios.post(`excel/TimerTShopAn`, data)
        .then((res) => {
          this.progress_bar = res.data
          if (res.data === 100) {
            clearInterval(this.timer_TShopAn)
          }
          if (res.data.code === 401) {
            this.progress_bar = 0
            clearInterval(this.timer_TShopAn)
            this.$message({
              type: 'error',
              message: '权限不足'
            })
          }
        }).catch((e) => {
          this.progress_bar = 0
          clearInterval(this.timer_TShopAn)
        })
    },
    getFile(event) {
      var file = event.target.files
      for (var i = 0; i < file.length; i++) {
        //    上传类型判断
        var imgName = file[i].name
        var idx = imgName.lastIndexOf('.')
        // eslint-disable-next-line eqeqeq
        if (idx != -1) {
          this.addArr.push(file[i])
        } else {
          this.$message(
            {
              type: 'error',
              message: '文件名格式错误'
            }
          )
        }
      }
    },
    submitAddFile_SaleItemsInsert() {
      // eslint-disable-next-line eqeqeq
      if (this.addArr.length == 0) {
        this.$message({
          type: 'info',
          message: '请选择要上传的文件'
        })
        return
      }
      var formData = new FormData()
      formData.append('file', this.addArr[0])
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          'Authorization': this.token
        }
      }
      this.fullscreenLoading = true
      this.timer_Items = setInterval(this.Timer_Items, 2000)
      this.$axios.post(`excel/SaleItemsInsert`, formData, config)
        .then((res) => {
          // eslint-disable-next-line eqeqeq
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.data
            })
            this.addArr = []
          } else {
            clearInterval(this.timer_Items)
            this.$message({
              type: 'error',
              message: res.data.message
            })
          }
          this.fullscreenLoading = false
          this.progress_bar = 0
          this.addArr = []
        }).catch((e) => {
          this.fullscreenLoading = false
          this.progress_bar = 0
          clearInterval(this.timer_Items)
        })
    },
    submitAddFile_TShopAnInsert() {
      // eslint-disable-next-line eqeqeq
      if (this.addArr.length == 0) {
        this.$message({
          type: 'info',
          message: '请选择要上传的文件'
        })
        return
      }
      var formData = new FormData()
      formData.append('file', this.addArr[0])
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          'Authorization': this.token
        },
        onUploadProgress: progressEvent => {
          var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
          this.progress_bar = complete
        }
      }
      this.fullscreenLoading = true
      this.timer_TShopAn = setInterval(this.Timer_TShopAn, 1000)
      this.$axios.post(`excel/TShopAnInsert`, formData, config)
        .then((res) => {
          // eslint-disable-next-line eqeqeq
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.data
            })
            this.addArr = []
          } else {
            clearInterval(this.timer_TShopAn)
            this.$message({
              type: 'error',
              message: res.data.message
            })
          }
          this.fullscreenLoading = false
          this.progress_bar = 0
          this.addArr = []
        }).catch((e) => {
          this.progress_bar = 0
          this.fullscreenLoading = false
          clearInterval(this.timer_TShopAn)
        })
    },
    submitAddFile_TUserInsert() {
      // eslint-disable-next-line eqeqeq
      if (this.addArr.length == 0) {
        this.$message({
          type: 'info',
          message: '请选择要上传的文件'
        })
        return
      }
      var formData = new FormData()
      formData.append('file', this.addArr[0])
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          'Authorization': this.token
        },
        onUploadProgress: progressEvent => {
          var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
          this.progress_bar = complete
        }
      }
      this.fullscreenLoading = true
      this.timer_IUser = setInterval(this.Timer_IUser, 2000)
      this.$axios.post(`excel/TUserInsert`, formData, config)
        .then((res) => {
          // eslint-disable-next-line eqeqeq
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.message
            })
            this.addArr = []
          } else {
            clearInterval(this.timer_IUser)
            this.$message({
              type: 'error',
              message: res.data.message
            })
          }
          this.fullscreenLoading = false
          this.progress_bar = 0
          this.addArr = []
        }).catch((e) => {
          this.progress_bar = 0
          this.fullscreenLoading = false
          clearInterval(this.timer_IUser)
        })
    },
    handleClick(tab, event) {
      this.addArr = []
    },
    delete_SaleItems() {
      const loading = this.$loading({
        lock: true,
        text: '删除中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      var d = new Date(this.befor_Items)
      // eslint-disable-next-line no-unused-vars
      var dd = new Date(this.after_Items)
      // eslint-disable-next-line no-unused-vars,no-undef
      var aa = d.getFullYear() + '-' + checkTime(d.getMonth() + 1) + '-' + checkTime(d.getDate())
      // eslint-disable-next-line camelcase,no-unused-vars,no-undef
      var aa_1 = dd.getFullYear() + '-' + checkTime(dd.getMonth() + 1) + '-' + checkTime(dd.getDate())
      var data = new URLSearchParams()
      data.append('befor', aa)
      data.append('after', aa_1)

      this.$axios.post(`excel/SaleItemsDelete`, data)
        .then((res) => {
          // eslint-disable-next-line eqeqeq
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.data
            })
            loading.close()
          }
        })
    },
    delete_TShopAn() {
      const loading = this.$loading({
        lock: true,
        text: '删除中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      var d = new Date(this.befor_TShopAn)
      // eslint-disable-next-line no-unused-vars
      var dd = new Date(this.after_TShopAn)
      // eslint-disable-next-line no-unused-vars,no-undef
      var aa = d.getFullYear() + '-' + checkTime(d.getMonth() + 1) + '-' + checkTime(d.getDate())
      // eslint-disable-next-line camelcase,no-unused-vars,no-undef
      var aa_1 = dd.getFullYear() + '-' + checkTime(dd.getMonth() + 1) + '-' + checkTime(dd.getDate())
      var data = new URLSearchParams()
      data.append('befor', aa)
      data.append('after', aa_1)

      this.$axios.post(`excel/TShopAnDelete`, data)
        .then((res) => {
          // eslint-disable-next-line eqeqeq
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.data
            })
            loading.close()
          }
        })
    },
    delete_TUser() {
      const loading = this.$loading({
        lock: true,
        text: '删除中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      var d = new Date(this.befor_IUser)
      // eslint-disable-next-line no-unused-vars
      var dd = new Date(this.after_IUser)
      // eslint-disable-next-line no-unused-vars,no-undef
      var aa = d.getFullYear() + '-' + checkTime(d.getMonth() + 1) + '-' + checkTime(d.getDate())
      // eslint-disable-next-line camelcase,no-unused-vars,no-undef
      var aa_1 = dd.getFullYear() + '-' + checkTime(dd.getMonth() + 1) + '-' + checkTime(dd.getDate())
      var data = new URLSearchParams()
      data.append('befor', aa)
      data.append('after', aa_1)

      this.$axios.post(`excel/TUserDelete`, data)
        .then((res) => {
          // eslint-disable-next-line eqeqeq
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.data
            })
            loading.close()
          }
        })
    },
    time_first() {
      var aData = new Date()
      this.befor_IUser = aData.getFullYear() + '-' + (aData.getMonth() + 1) + '-' + aData.getDate()
      this.after_IUser = aData.getFullYear() + '-' + (aData.getMonth() + 1) + '-' + aData.getDate()
      this.befor_Items = aData.getFullYear() + '-' + (aData.getMonth() + 1) + '-' + aData.getDate()
      this.after_Items = aData.getFullYear() + '-' + (aData.getMonth() + 1) + '-' + aData.getDate()
      this.befor_TShopAn = aData.getFullYear() + '-' + (aData.getMonth() + 1) + '-' + aData.getDate()
      this.after_TShopAn = aData.getFullYear() + '-' + (aData.getMonth() + 1) + '-' + aData.getDate()
    }
  }
}
</script>

<template>
  <div class="excel">
    <el-tabs
      type="card"
      @tab-click="handleClick"
      v-loading.fullscreen.lock="fullscreenLoading"
      :element-loading-text="progress_bar+'%'"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-tab-pane label="会员消费明细表" name="first">
        <div class="p-20">
          <div class="select-file mt-20">
            <svg t="1607262217582" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2184" width="100" height="100"><path d="M768 352a224 224 0 0 1 0 448h-32a32 32 0 0 1 0-64h32a160 160 0 0 0 0-320 147.2 147.2 0 0 0-27.84 2.56 32 32 0 0 1-38.08-27.52 192 192 0 0 0-380.16 0 32 32 0 0 1-38.08 27.52A147.2 147.2 0 0 0 256 416a160 160 0 0 0 0 320h32a32 32 0 0 1 0 64h-32a224 224 0 0 1 0-448h8.32a256 256 0 0 1 495.36 0z" p-id="2185" fill="#1296db"></path><path d="M544 896a32 32 0 0 1-64 0V608a32 32 0 0 1 64 0z" p-id="2186" fill="#1296db"></path><path d="M424 757.12a32 32 0 1 1-48-42.24l112-128a32 32 0 0 1 48 0l112 128a32 32 0 0 1-48 42.24l-88-100.48z" p-id="2187" fill="#1296db"></path></svg>
            <h5 class="up-button-title">请上传xls文件,一次只可上传一个文件</h5>
            <div class="up-button">
              <input ref="clearFile" type="file" multiple="multiplt" accept=".xls" @change="getFile($event)">
            </div>
           <el-button class="mt-5" type="primary" size="small" @click="submitAddFile_SaleItemsInsert">开始上传</el-button>
          </div>
          <div  class="delete">
            <h5>
              <span style="margin-right: 10px">指定要删除的时间(时间判定为数据导入时间)</span>
              从
              <el-date-picker
                v-model="befor_Items"
                type="date"
                placeholder="选择日期"
                style="margin-left: 20px;margin-right: 20px"
              />
              至
              <el-date-picker
                v-model="after_Items"
                type="date"
                placeholder="选择日期"
                style="margin-left: 20px;margin-right: 20px"
              />
              <el-button type="primary" size="small" @click="delete_SaleItems">删除数据库</el-button>
            </h5>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="商城会员" name="second">
        <div class="p-20">
          <div class="select-file mt-20">
            <svg t="1607262217582" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2184" width="100" height="100"><path d="M768 352a224 224 0 0 1 0 448h-32a32 32 0 0 1 0-64h32a160 160 0 0 0 0-320 147.2 147.2 0 0 0-27.84 2.56 32 32 0 0 1-38.08-27.52 192 192 0 0 0-380.16 0 32 32 0 0 1-38.08 27.52A147.2 147.2 0 0 0 256 416a160 160 0 0 0 0 320h32a32 32 0 0 1 0 64h-32a224 224 0 0 1 0-448h8.32a256 256 0 0 1 495.36 0z" p-id="2185" fill="#1296db"></path><path d="M544 896a32 32 0 0 1-64 0V608a32 32 0 0 1 64 0z" p-id="2186" fill="#1296db"></path><path d="M424 757.12a32 32 0 1 1-48-42.24l112-128a32 32 0 0 1 48 0l112 128a32 32 0 0 1-48 42.24l-88-100.48z" p-id="2187" fill="#1296db"></path></svg>
            <h5 class="up-button-title">请上传xls文件,一次只可上传一个文件</h5>
            <input ref="clearFile" type="file" multiple="multiplt" accept=".xls" @change="getFile($event)">
            <el-button class="mt-5" type="primary" size="small" @click="submitAddFile_TUserInsert">开始上传</el-button>
          </div>
          <div class="delete">
            <h5>
              <span style="margin-right: 10px">指定要删除的时间(时间判定为数据导入时间)</span>
              从
              <el-date-picker
                v-model="befor_IUser"
                type="date"
                placeholder="选择日期"
                style="margin-left: 20px;margin-right: 20px"
              />
              至
              <el-date-picker
                v-model="after_IUser"
                type="date"
                placeholder="选择日期"
                style="margin-left: 20px;margin-right: 20px"
              />
              <el-button type="primary" size="small" @click="delete_TUser">删除数据库</el-button>
            </h5>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="门店运行分析" name="third">
        <div class="p-20">
          <div class="select-file mt-20">
            <svg t="1607262217582" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2184" width="100" height="100"><path d="M768 352a224 224 0 0 1 0 448h-32a32 32 0 0 1 0-64h32a160 160 0 0 0 0-320 147.2 147.2 0 0 0-27.84 2.56 32 32 0 0 1-38.08-27.52 192 192 0 0 0-380.16 0 32 32 0 0 1-38.08 27.52A147.2 147.2 0 0 0 256 416a160 160 0 0 0 0 320h32a32 32 0 0 1 0 64h-32a224 224 0 0 1 0-448h8.32a256 256 0 0 1 495.36 0z" p-id="2185" fill="#1296db"></path><path d="M544 896a32 32 0 0 1-64 0V608a32 32 0 0 1 64 0z" p-id="2186" fill="#1296db"></path><path d="M424 757.12a32 32 0 1 1-48-42.24l112-128a32 32 0 0 1 48 0l112 128a32 32 0 0 1-48 42.24l-88-100.48z" p-id="2187" fill="#1296db"></path></svg>
            <h5 class="up-button-title">请上传xls文件,一次只可上传一个文件</h5>
            <input ref="clearFile" type="file" multiple="multiplt" accept=".xls" @change="getFile($event)">
            <el-button class="mt-5" type="primary" size="small" @click="submitAddFile_TShopAnInsert">开始上传</el-button>
          </div>
          <div class="delete">
            <h5>
              <span style="margin-right: 10px">指定要删除的时间(时间判定为数据导入时间)</span>
              从
              <el-date-picker
                v-model="befor_TShopAn"
                type="date"
                placeholder="选择日期"
                style="margin-left: 20px;margin-right: 20px"
              />
              至
              <el-date-picker
                v-model="after_TShopAn"
                type="date"
                placeholder="选择日期"
                style="margin-left: 20px;margin-right: 20px"
              />
              <el-button type="primary" size="small" @click="delete_TShopAn">删除数据库</el-button>
            </h5>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .excel{
    font-size: 1rem;
    color: #393939;
  }
.p-20{
  padding: 20px;
}
  .mt-5{
    margin-top: 5px;
  }
  .mt-20{
    margin-top: 20px;
  }
  .select-file{
    width: 400px;
    padding: 40px 70px;
    text-align: center;
    margin: 0 auto;
    border: 2px dashed #bbb;
    border-radius: 5px;
  }
  .delete{
    padding: 20px;
    text-align: center;
    margin-top: 20px;
    border: 2px solid whitesmoke;
  }
  .up-button-title{
    margin: 0;
    padding: 10px;
    color: rgba(180,180,180,0.45);
    font-weight: 500;
    font-family: "Nunito Sans", sans-serif;
  }
</style>
